<template id='Dawnloads'>
  <div class="Dawnloads">
    <top-bar :isClick="isClick" />
    <div class="main">
      <div class="path1">
        <div class="path1Title">
          <!-- <div class="dawnloadsIcon">
            <b-img :src="downloadsIcon" fluid></b-img>
          </div> -->
          <div class="title1BlueText"></div>
          <div class="title1Text"></div>
          <div class="desc">{{ path1.desc }}</div>
        </div>
        <div class="links">
          <div class="linksBtns">
            <div class="leftBtn" @click="downLoad('sdk')">
              <span>SDK APPLICATION</span>
            </div>
            <!-- <div class="rightBtn" @click="downLoad('document')">
              <span>PRODUCT DOCUMENT</span>
            </div> -->
          </div>
          <div class="git" @click="goToGitHub">
            <b-img :src="path1.gitHubIcon" fluid></b-img>
            <span>GitHub</span>
          </div>
        </div>
      </div>
      <div class="path3">
        <video controls autoplay>
          <source
            src="https://gmatrixs.com/static/Gmatrixs.mp4"
            type="video/mp4"
          />
        </video>
      </div>
      <div class="path2">
        <div class="path2Title">
          <div class="title2Text"></div>
        </div>
        <div class="path2Content">
          <div class="sdkItem" v-for="(item, index) in sdkList" :key="index">
            <div class="sdkIcon">
              <b-img :src="item.icon" fluid></b-img>
            </div>
            <div class="title">{{ item.title }}</div>
            <div class="desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </div>
    <bottom-bar />
  </div>
</template>

<script>
import BottomBar from "../../components/BottomBar.vue";
import TopBar from "../../components/TopBar.vue";
export default {
  name: "Dawnloads",
  components: { BottomBar, TopBar },
  data() {
    return {
      isClick: 2,
      // downloadsIcon: require("../../assets/images/dawnloads/downloadsIcon.png"),
      path1: {
        desc: "Game developers, including individuals, studios, or companies, can apply to be part of Gmatrixs through the distributed autonomous access mechanism to produce and publish blockchain games.",
        gitHubIcon: require("../../assets/images/dawnloads/gitHub.png"),
      },
      sdkList: [
        {
          icon: require("../../assets/images/dawnloads/sdk1.png"),
          title: "Dedicated sub-chain",
          desc: "PBFT consensus mechanism for each dedicated sub-chain",
          paht: "",
        },
        {
          icon: require("../../assets/images/dawnloads/sdk2.png"),
          title: "Asset Circulation",
          desc: "Smart contract requires mainchain token",
          paht: "",
        },
        {
          icon: require("../../assets/images/dawnloads/sdk3.png"),
          title: "Decentralized game server framework",
          desc: "Specialized game decentralized server framework",
          paht: "",
        },
        {
          icon: require("../../assets/images/dawnloads/sdk4.png"),
          title: "Developer reward distribution",
          desc: "The mining nodes will be rewarded from game transactions",
          paht: "",
        },
        {
          icon: require("../../assets/images/dawnloads/sdk5.png"),
          title: "Multilingual",
          desc: "Available in English and Chinses",
          paht: "",
        },
        {
          icon: require("../../assets/images/dawnloads/sdk6.png"),
          title: "Unique PoA comfirmation mechanism",
          desc: "Gamers earn mainchain token through POA comfirmation mechanismz",
          paht: "",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    goToGitHub() {
      let href = "https://github.com/Gmatrixs-inc/web";
      window.open(href, "_blank");
    },
    downLoad(type) {
      let href = "";
      if (type == "sdk") {
        href = "http://gmatrixs.com/static/GMS_SDK_API.pdf";
        window.open(href, "_blank");
      } else if (type == "document") {
      }
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>

<style lang='less' scoped>
.Dawnloads {
  background-color: #000;
  user-select: none;
  .main {
    .path1 {
      padding: 0 244px;
      background-color: #000;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .path1Title {
        margin-top: 207px;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        .dawnloadsIcon {
          -webkit-animation: shake-vertical 5s
            cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite both;
          animation: shake-vertical 5s cubic-bezier(0.455, 0.03, 0.515, 0.955)
            infinite both;
          @-webkit-keyframes shake-vertical {
            0%,
            100% {
              -webkit-transform: translateY(0);
              transform: translateY(0);
            }
            10%,
            30%,
            50%,
            70% {
              -webkit-transform: translateY(-8px);
              transform: translateY(-8px);
            }
            20%,
            40%,
            60% {
              -webkit-transform: translateY(8px);
              transform: translateY(8px);
            }
            80% {
              -webkit-transform: translateY(6.4px);
              transform: translateY(6.4px);
            }
            90% {
              -webkit-transform: translateY(-6.4px);
              transform: translateY(-6.4px);
            }
          }
          @keyframes shake-vertical {
            0%,
            100% {
              -webkit-transform: translateY(0);
              transform: translateY(0);
            }
            10%,
            30%,
            50%,
            70% {
              -webkit-transform: translateY(-8px);
              transform: translateY(-8px);
            }
            20%,
            40%,
            60% {
              -webkit-transform: translateY(8px);
              transform: translateY(8px);
            }
            80% {
              -webkit-transform: translateY(6.4px);
              transform: translateY(6.4px);
            }
            90% {
              -webkit-transform: translateY(-6.4px);
              transform: translateY(-6.4px);
            }
          }
          img {
            width: 58px;
            height: 70px;
            margin-bottom: 12px;
          }
        }
        .title1BlueText {
          background: url("../../assets/images/dawnloads/Downloads.png");
          background-size: 100% 100%;
          width: 800px;
          height: 166px;
          margin-bottom: 18px;
        }
        .title1Text {
          background: url("../../assets/images/dawnloads/title1.png");
          background-size: 100% 100%;
          width: 1137px;
          height: 160px;
          margin-bottom: 20px;
          margin-bottom: 99px;
        }
        .desc {
          font-size: 26px;
          color: #ffffff;
          font-weight: 500;
          text-align: center;
        }
      }
      .links {
        margin-top: 53px;
        padding: 0 235px;
        width: 100%;
        .linksBtns {
          display: flex;
          align-items: center;
          justify-content: center;
          .leftBtn {
            cursor: pointer;
            width: 50%;
            height: 71px;
            background: #ffffff;
            box-shadow: 0px 3px 43px rgba(67, 141, 238, 0.5);
            border-radius: 46px;
            color: #438dee;
            font-size: 26px;
            font-weight: 500;
            // margin-right: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .leftBtn:hover,
          .rightBtn:hover {
            -webkit-animation: leftblink 0.9s both;
            animation: leftblink 0.9s both;
            @-webkit-keyframes leftblink {
              0% {
                opacity: 1;
              }
              50% {
                opacity: 0.2;
              }
              100% {
                opacity: 1;
              }
            }
            @keyframes leftblink {
              0% {
                opacity: 1;
              }
              50% {
                opacity: 0.2;
              }
              100% {
                opacity: 1;
              }
            }
          }
          .rightBtn {
            cursor: pointer;
            flex: 1;
            height: 71px;
            background: #438dee;
            border-radius: 46px;
            font-size: 26px;
            font-weight: 500;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        .git {
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-top: 82px;
          margin-bottom: 78px;
          color: #ffffff;
          img {
            width: 52px;
            height: 52px;
            margin-bottom: 11px;
          }
          img:hover,
          img:hover + span {
            -webkit-animation: blink-2 0.9s both;
            animation: blink-2 0.9s both;
            @-webkit-keyframes blink-2 {
              0% {
                opacity: 1;
                color: #ffffff;
              }
              50% {
                opacity: 0.2;
                color: #438dee;
              }
              100% {
                opacity: 1;
                color: #ffffff;
              }
            }
            @keyframes blink-2 {
              0% {
                opacity: 1;
                color: #ffffff;
              }
              50% {
                opacity: 0.2;
                color: #438dee;
              }
              100% {
                opacity: 1;
                color: #ffffff;
              }
            }
          }
          span {
            font-size: 22px;
            font-weight: 800;
          }
        }
      }
    }
    .path3 {
      padding: 0 244px;
      background-color: #000;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 1081px;
      justify-content: center;
      margin-bottom: 78px;
      video {
        width: 100%;
      }
    }
    .path2 {
      background: url("../../assets/images/dawnloads/bg.jpg");
      background-size: 100% 100%;
      width: 100%;
      height: 1719px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 368px;
      .path2Title {
        margin-top: 151px;
        display: flex;
        flex-direction: column;
        justify-items: center;
        align-items: center;
        .title2Text {
          background: url("../../assets/images/dawnloads/sdk.png");
          background-size: 100% 100%;
          width: 1137px;
          height: 160px;
          margin-bottom: 20px;
          margin-bottom: 99px;
        }
      }
      .path2Content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .sdkItem {
        // cursor: pointer;
        width: 483px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 200px;
        color: #fff;
        .sdkIcon {
          margin-bottom: 47px;
          img {
            width: 88px;
            height: 83px;
          }
        }
        .title {
          font-size: 25px;
          font-weight: 800;
          // color: #ffffff;
          line-height: 40px;
          margin-bottom: 22px;
          text-align: center;
        }
        .desc {
          font-size: 20px;
          font-weight: 400;
          // color: #ffffff;
          text-align: center;
        }
      }
      .sdkItem:hover {
        -webkit-animation: blink-1 0.6s both;
        animation: blink-1 0.6s both;
        @-webkit-keyframes blink-1 {
          0%,
          50%,
          100% {
            opacity: 1;
            color: #fff;
          }
          25%,
          75% {
            opacity: 0.2;
            color: #438dee;
          }
        }
        @keyframes blink-1 {
          0%,
          50%,
          100% {
            opacity: 1;
            color: #fff;
          }
          25%,
          75% {
            opacity: 0.2;
            color: #438dee;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .Dawnloads {
    // height: 100%;
    .main {
      .path1 {
        padding: 0 40px;
        .path1Title {
          margin-top: 190px;
          .title1BlueText {
            width: 533px;
            height: 110px;
          }
          .title1Text {
            width: 758px;
            height: 106px;
          }
          .desc {
            font-size: 31px;
          }
        }
        .links {
          padding: 0;
          .git {
            span {
              font-size: 27px;
            }
          }
        }
      }
      .path3 {
        padding: 0 40px;
        height: auto;
      }
      .path2 {
        padding: 0 40px;
        background: url("../../assets/images/dawnloads/bg_phone.jpg");
        width: 100%;
        height: 1920px;
        background-size: 100% 100%;
        .path2Title {
          .title2Text {
            width: 758px;
            height: 106px;
          }
        }
        .path2Content {
          .sdkItem {
            width: 45%;
            .title {
              font-size: 35px;
            }
            .desc {
              font-size: 30px;
            }
          }
        }
      }
    }
  }
}
</style>